{% extends 'base.html' %}

{% block title %}首页 - 个人博客{% endblock %}

{% block content %}
<div class="container">
    <!-- 特色文章 -->
    {% if featured_posts %}
    <div class="row mb-4">
        <div class="col-12">
            <h2 class="mb-4">特色文章</h2>
        </div>
        {% for post in featured_posts %}
        <div class="col-md-4 mb-4">
            <div class="card h-100 shadow-sm">
                {% if post.featured_image %}
                <img src="{{ post.featured_image.url }}" class="card-img-top featured-img" alt="{{ post.title }}">
                {% else %}
                <img src="https://via.placeholder.com/800x400?text=No+Image" class="card-img-top featured-img" alt="Placeholder">
                {% endif %}
                <div class="card-body">
                    <h5 class="card-title">{{ post.title }}</h5>
                    <p class="card-text text-muted">
                        <small>
                            <i class="fas fa-user me-1"></i> {{ post.author.username }} |
                            <i class="fas fa-calendar me-1"></i> {{ post.publish_date|date:"Y-m-d" }} |
                            <i class="fas fa-eye me-1"></i> {{ post.views }}
                        </small>
                    </p>
                    <p class="card-text">{{ post.summary|truncatewords:20 }}</p>
                    <a href="{{ post.get_absolute_url }}" class="btn btn-primary">阅读更多</a>
                </div>
            </div>
        </div>
        {% endfor %}
    </div>
    {% endif %}

    <div class="row">
        <!-- 文章列表 -->
        <div class="col-md-8">
            <h2 class="mb-4">最新文章</h2>
            {% for post in posts %}
            <div class="card mb-4 shadow-sm">
                <div class="row g-0">
                    {% if post.featured_image %}
                    <div class="col-md-4">
                        <img src="{{ post.featured_image.url }}" class="img-fluid rounded-start h-100 w-100" style="object-fit: cover;" alt="{{ post.title }}">
                    </div>
                    <div class="col-md-8">
                    {% else %}
                    <div class="col-12">
                    {% endif %}
                        <div class="card-body">
                            <h5 class="card-title">{{ post.title }}</h5>
                            <p class="card-text text-muted">
                                <small>
                                    <i class="fas fa-user me-1"></i> {{ post.author.username }} |
                                    <i class="fas fa-calendar me-1"></i> {{ post.publish_date|date:"Y-m-d" }} |
                                    <i class="fas fa-eye me-1"></i> {{ post.views }} |
                                    <i class="fas fa-comments me-1"></i> {{ post.comments.count }}
                                </small>
                            </p>
                            <p class="card-text">{{ post.summary|truncatewords:30 }}</p>
                            <div class="d-flex justify-content-between align-items-center">
                                <div>
                                    {% if post.category %}
                                    <a href="{% url 'category_detail' post.category.slug %}" class="badge bg-primary text-decoration-none">{{ post.category.name }}</a>
                                    {% endif %}
                                    {% for tag in post.tags.all %}
                                    <a href="{% url 'tag_detail' tag.slug %}" class="badge bg-secondary text-decoration-none">{{ tag.name }}</a>
                                    {% endfor %}
                                </div>
                                <a href="{{ post.get_absolute_url }}" class="btn btn-sm btn-outline-primary">阅读更多</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            {% empty %}
            <div class="alert alert-info">
                暂无文章
                {% if user.is_authenticated %}
                <a href="{% url 'post_create' %}" class="alert-link">点击这里</a> 创建您的第一篇文章！
                {% else %}
                请 <a href="{% url 'account_login' %}" class="alert-link">登录</a> 后发布文章。
                {% endif %}
            </div>
            {% endfor %}

            <!-- 分页 -->
            {% if posts.paginator.num_pages > 1 %}
            <nav aria-label="Page navigation">
                <ul class="pagination justify-content-center">
                    {% if posts.has_previous %}
                    <li class="page-item">
                        <a class="page-link" href="?page=1" aria-label="First">
                            <span aria-hidden="true">&laquo;&laquo;</span>
                        </a>
                    </li>
                    <li class="page-item">
                        <a class="page-link" href="?page={{ posts.previous_page_number }}" aria-label="Previous">
                            <span aria-hidden="true">&laquo;</span>
                        </a>
                    </li>
                    {% endif %}

                    {% for num in posts.paginator.page_range %}
                    {% if posts.number == num %}
                    <li class="page-item active"><a class="page-link" href="?page={{ num }}">{{ num }}</a></li>
                    {% elif num > posts.number|add:'-3' and num < posts.number|add:'3' %}
                    <li class="page-item"><a class="page-link" href="?page={{ num }}">{{ num }}</a></li>
                    {% endif %}
                    {% endfor %}

                    {% if posts.has_next %}
                    <li class="page-item">
                        <a class="page-link" href="?page={{ posts.next_page_number }}" aria-label="Next">
                            <span aria-hidden="true">&raquo;</span>
                        </a>
                    </li>
                    <li class="page-item">
                        <a class="page-link" href="?page={{ posts.paginator.num_pages }}" aria-label="Last">
                            <span aria-hidden="true">&raquo;&raquo;</span>
                        </a>
                    </li>
                    {% endif %}
                </ul>
            </nav>
            {% endif %}
        </div>

        <!-- 侧边栏 -->
        <div class="col-md-4">
            <!-- 分类 -->
            <div class="card mb-4 shadow-sm">
                <div class="card-header bg-primary text-white">
                    <h5 class="card-title mb-0">分类</h5>
                </div>
                <div class="card-body">
                    <ul class="list-group list-group-flush">
                        {% for category in categories %}
                        <li class="list-group-item d-flex justify-content-between align-items-center">
                            <a href="{% url 'category_detail' category.slug %}" class="text-decoration-none">{{ category.name }}</a>
                            <span class="badge bg-primary rounded-pill">{{ category.post_count }}</span>
                        </li>
                        {% empty %}
                        <li class="list-group-item">暂无分类</li>
                        {% endfor %}
                    </ul>
                </div>
            </div>

            <!-- 标签云 -->
            <div class="card mb-4 shadow-sm">
                <div class="card-header bg-secondary text-white">
                    <h5 class="card-title mb-0">标签云</h5>
                </div>
                <div class="card-body">
                    <div class="d-flex flex-wrap gap-2">
                        {% for tag in tags %}
                        <a href="{% url 'tag_detail' tag.slug %}" class="badge bg-secondary text-decoration-none fs-6">{{ tag.name }}</a>
                        {% empty %}
                        <p>暂无标签</p>
                        {% endfor %}
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}
</div>